<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <title>Bootstrap模态框果案例</title>
</head>

<body>
    <button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
        启动大Modal
    </button>
    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                一个大的Modal
            </div>
        </div>
    </div>
    <button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">
        启动小Modal
    </button>
    <div class="modal bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                一个小的Modal
            </div>
        </div>
    </div>

    <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">
        Open modal for @mdo
    </button>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 id="exampleModalLabel" class="modal-title">
                        New Message
                    </h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Recipient</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Send</button>

                </div>
            </div>
        </div>
    </div>
    <script src="../js/jquery-1.12.4.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script>
        $("#exampleModal").on("show.bs.modal", function(e) {
            var button = $(e.relatedTarget)
            var recipient = button.data("whatever")
            var modal = $(this)
            modal.find(".modal-title").text("New Message to " + recipient)
            modal.find(".modal-body input").val(recipient)
        })
    </script>
</body>

</html>